/*全局*/
body {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/*滚动条宽度*/
*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/*滚动条轨道*/
*::-webkit-scrollbar-track {
    background-color: white;
    border-radius: 2px;
}

/*滚动滑块*/
*::-webkit-scrollbar-thumb {
    background-color: rgb(255, 141, 0);
    border-radius: 3px;
}

/*主div*/
#app {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: url("@/assets/system_background.png");
    background-size: cover;
}

/*主视窗div*/
.view-container {
    width: 60vw;
    overflow: hidden;
    display: flex;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    flex-direction: column;
    justify-content: space-evenly;
}

/*水平布局*/
.hor-container {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-direction: row;
    justify-content: space-between;
}

/*垂直布局*/
.ver-container {
    height: 100%;
    display: flex;
    gap: 20px;
    flex-direction: column;
    justify-content: space-between;
}

/*分割线*/
.ver-divider {
    width: 5px !important;
    height: 28px !important;
    border-radius: 3px;
    top: 0;
    background-color: rgb(255, 141, 0) !important;
}

.el-divider--horizontal {
    height: 2px !important;
    margin: 2px 0 !important;
}

/*分页*/
.el-pagination {
    margin-top: 5px;
    display: flex;
    justify-content: center;
}

.el-pagination.is-background .btn-next.is-active, .el-pagination.is-background .btn-prev.is-active, .el-pagination.is-background .el-pager li.is-active {
    background-color: rgb(255, 141, 0);
    color: var(--el-color-white);
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: rgb(255, 141, 0);
    color: #fff;
}

.el-pagination.is-background .el-pager li.active {
    color: #fff;
    cursor: default;
}

.el-pagination.is-background .el-pager li:hover {
    color: rgb(255, 141, 0);
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: rgb(0, 178, 255);
}

.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    background-color: rgb(255, 141, 0);
    color: #fff;
}

/*单选*/
.el-radio-button__original-radio:checked + .el-radio-button__inner {
    background-color: rgb(255, 141, 0);
    border-color: rgb(255, 141, 0);
    box-shadow: -1px 0 0 0 var(--el-radio-button-checked-border-color, var(--el-color-primary));
    color: var(--el-radio-button-checked-text-color, var(--el-color-white));
}

/*内容板*/
.author {
    color: #00B2FF;
}

.createTime {
    color: #FFA424;
}

.updateTime {
    color: #19CECE
}

iframe {
    border: 0;
    width: 100%;
}

/* 响应式媒体查询 */
/* 平板设备 */
@media (max-width: 1024px) {
    .view-container {
        width: 80vw;
    }
    
    #menu {
        width: 80%;
    }
    
    .hor-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .hor-container > * {
        width: 100% !important;
    }
}

/* 手机设备 */
@media (max-width: 768px) {
    .view-container {
        width: 95vw;
        padding-top: 10px;
        padding-bottom: 10px;
        gap: 10px;
    }
    
    #menu {
        width: 95%;
    }
    
    .menu-title {
        font-size: 20px !important;
    }
    
    .menu-icon {
        width: 20px !important;
        height: 20px !important;
    }
    
    .hor-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .hor-container > * {
        width: 100% !important;
    }
    
    .ver-container {
        gap: 10px;
    }
    
    .card-title {
        font-size: 18px !important;
        height: 20px !important;
        line-height: 20px !important;
    }
    
    .el-pagination {
        font-size: 12px;
    }
    
    .el-pagination .btn-next,
    .el-pagination .btn-prev {
        font-size: 12px;
    }
    
    .el-pagination .el-pager li {
        font-size: 12px;
        min-width: 28px;
        height: 28px;
        line-height: 28px;
    }
    
    /* 底部信息在手机上垂直排列 */
    #footer .el-main {
        height: auto !important;
        padding: 5px 0 !important;
    }
    
    #footer .ver-divider {
        display: none;
    }
    
    #footer .title {
        display: block;
        margin: 2px 0;
        font-size: 12px;
    }
    
    #footer .copyright {
        font-size: 10px;
    }
}

/* 小屏手机设备 */
@media (max-width: 480px) {
    .view-container {
        width: 98vw;
        padding-top: 5px;
        padding-bottom: 5px;
        gap: 5px;
    }
    
    #menu {
        width: 98%;
    }
    
    .menu-title {
        font-size: 16px !important;
    }
    
    .menu-icon {
        width: 16px !important;
        height: 16px !important;
    }
    
    .card-title {
        font-size: 16px !important;
        height: 18px !important;
        line-height: 18px !important;
    }
    
    .el-pagination {
        font-size: 10px;
    }
    
    .el-pagination .el-pager li {
        min-width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 10px;
    }
    
    .el-pagination .btn-next,
    .el-pagination .btn-prev {
        font-size: 10px;
        min-width: 24px;
        height: 24px;
    }
}

